<template>
	<view class="body">
		<u-navbar :is-back="false" title="" :background="background">
			<view class="slot-wrap">
				<image src="../../static/uview/common/icon.png" class="indexlogo"></image>
				<view class="projectName">
					寺庙名称
				</view>
				<view class="exmple">
					互联网宗教信息服务许可证
					<br>
					川（2023）0000000
				</view>
			</view>
		</u-navbar>
		<view class="index-swiper">
			<u-swiper :list="swiperList" height="300"></u-swiper>
		</view>
		<view class="navList">
			<view class="introduce" @click="gotoPage('/pages/templeDetails/templeDetails')">
				<image src="../../static/uview/common/1.png" class="navImg"></image>
				<view class="navtext">
					寺院介绍
				</view>
			</view>
			<view class="introduce" @click="gotoPage('/pages/monkDetails/monkDetails')">
				<image src="../../static/uview/common/2.png" class="navImg"></image>
				<view class="navtext">
					法师介绍
				</view>
			</view>
		</view>
		<view class="personList-title">
			{{ sendobj.title }}
		</view>
		<view class="personList-subtitle">
			{{ sendobj.subtitle }}
		</view>
		<view class="personList-container">
			<view v-html="sendobj.info" class="v_html">

			</view>

		</view>

		<view class="copyright">
			<view @click="gotoPage('/pages/index/index')" class="backHome">
				<view class="">
					<!-- <u-icon @click="back" name="arrow-left" color="#BE9567" size="60"></u-icon> -->
					<image src="../../static/simiaoimg.png" style="width: 60rpx;height: 60rpx;"></image>
					<!-- <u-icon name="arrow-left" color="#BE9567" size="60"></u-icon> -->
				</view>
				<view class="">
					返回首页
				</view>
			</view>
			<view class="suiliBtn" @click="suili">
				{{ sendobj.suixi_button_text }}
			</view>
		</view>
		<u-popup v-model="showSuili" mode="bottom">
			<view class="suili-container">
				<view class="suili-title">
					金额
				</view>
				<view class="moneyList">
					<view v-for="(item, index) in suixi_amount" :key="index" class="moneyNumber"
						:class="{ active: activeIndex === index }" @click="changeBackgroundColor(index)">
						{{ item }}
					</view>
				</view>
				<view class="suili-title">
					其他金额
				</view>
				<view class="ortherMoney">
					<input @input="other_suixi" type="text" v-model="ortherMoney" placeholder="其他金额" class="inputBox">
				</view>
				<view class="suili-title">
					联系方式
				</view>
				<view class="ortherMoney">
					<input type="text" v-model="updateObj.merits_name" placeholder="功德芳名(选填)" class="inputBox">
				</view>
				<view class="ortherMoney">
					<input type="text" v-model="updateObj.phone" placeholder="联系电话(选填)" class="inputBox">
				</view>
				<view class="suili-title">
					留言
				</view>
				<view class="ortherWord">
					<input v-model="updateObj.message" type="text" class="inputBox">
				</view>
				<view class="zhifu-container">
					<view @click="monkpay" class="suiliBtn2">
						微信支付
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			prices: [50, 100, 200, 500],
			selectedIndex: null,
			suixi_amount: [],
			updateObj: {
				item_id: -1,
				suixi_amount: null,
				merits_name: '',
				phone: '',
				message: '',
			},
			activeIndex: null,//被选中的suixi 的 index
			ortherMoney: '',
			sendobj: {},

			showSuili: false,
			personList: [1, 2, 3, 4],
			prizeList: [],
			imgSrc: 'https://cdn.uviewui.com/uview/example/fade.jpg',
			background: {
				backgroundColor: '#BE9567',
			},
			swiperList: [],
		}
	},
	methods: {
		selectPrice(index) {
			this.selectedIndex = index;
			console.log('%c [ this.selectedIndex ]-151', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectedIndex)
		},
		other_suixi() {
			this.activeIndex = null
		},
		changeBackgroundColor(index) {
			this.ortherMoney = ''
			this.activeIndex = index; // 点击时更新activeIndex
		},
		gotoPage(url, qr) {

			if (qr) {
				let qrstr = JSON.stringify(qr)
				uni.navigateTo({
					url: url + '?qr=' + qrstr
				})
			} else {
				uni.navigateTo({
					url: url
				})
			}
		},
		suili() {
			this.showSuili = true


		},

		monkpay() {
			console.log('%c [ this.activeIndex ]-173', 'font-size:13px; background:pink; color:#bf2c9f;', this.activeIndex)

			if (this.activeIndex == null && this.ortherMoney == '') {
				uni.showToast({
					title: '请选择金额或输入金额',
					icon: 'none',
				})
				return
			}

			if (this.activeIndex !== null) {//选择固定金额的
				this.updateObj.suixi_amount = this.suixi_amount[this.activeIndex]
			}

			if (this.ortherMoney !== '') {//选择输入金额的
				this.updateObj.suixi_amount = this.ortherMoney
			}

			this.updateObj.item_id = this.sendobj.id

			uni.request({
				url: this.$url + '/api/shimiao/order/add', method: 'POST', data: this.updateObj,
				success: (res => {
					console.log('%c [ res ]-164', 'font-size:13px; background:pink; color:#bf2c9f;', res)
					if (res.data.code == 200) {
						uni.showToast({
							title: '提交成功,请稍等...',
							icon: 'none',
							duration: 2000

						});
						this.showSuili = false
						setTimeout(() => {
							this.gotoPage('/pages/payMonk/payMonk', this.sendobj.success_qr_url)
						}, 2000);
					}
				})
			})
		},
	},
	onLoad(options) {
		if (options) {
			this.sendobj = JSON.parse(options.send)
			//将轮播图的图片地址和标题放入轮播图数组
			this.sendobj.banner_urls.forEach(item => {
				this.swiperList.push({ image: item, })
			});
			//将供奉价格放到金额列表中
			this.suixi_amount = this.sendobj.suixi_amount.split(',');
		}
		console.log('%c [ this.sendobj ]-154', 'font-size:13px; background:pink; color:#bf2c9f;', this.sendobj)

	},

}
</script>


<style lang="scss" scoped>
.price-option {
	width: 120rpx;
	height: 70rpx;
	background-color: #fff;
	border: 1rpx solid #999;
	display: flex;
	border-radius: 10rpx;
	align-items: center;
	justify-content: center;
	margin-bottom: 10rpx;
}

.selected {
	border: 1px solid #4a84f5ff;
	color: #4a84f5ff;
	// background-color: #4a84f5ff; /* 选中状态的背景色 */
	// color: #fff; /* 选中状态的文字颜色 */
}

.moneyNumber.active {
	background: #BE9567 !important;
	color: #fff;
	/* 设置你想要的背景颜色 */
}


.zhifu-container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.suiliBtn2 {
	background-color: #BE9567;
	width: 400rpx;
	height: 100rpx;
	border-radius: 20rpx;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.suili-container {
	background-color: #FBF5EA;
	border-radius: 10px 10px 0 0;
	padding: 20rpx;
	background-image: url('/static/pic.png');
	background-size: 550px 550px;
	background-repeat: no-repeat;
	background-position: -150px 0px;

	.suili-title {
		font-size: 18px;
		margin-bottom: 20rpx;
	}

	.ortherWord {
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		border: 1rpx solid #999;
		display: flex;
		border-radius: 10rpx;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		padding: 10px;

		.inputBox {
			width: 100%;
		}
	}

	.ortherMoney {
		width: 100%;
		height: 70rpx;
		background-color: #fff;
		border: 1rpx solid #999;
		display: flex;
		border-radius: 10rpx;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		padding: 10px;

		.inputBox {
			width: 100%;
		}
	}

	.moneyList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.moneyNumber {
			width: 120rpx;
			height: 70rpx;
			background-color: #fff;
			border: 1rpx solid #999;
			display: flex;
			border-radius: 10rpx;
			align-items: center;
			justify-content: center;
		}
	}

}

.copyright {
	position: fixed;
	width: 100%;
	bottom: 0;
	background-color: #FBF5EA;
	display: flex;
	height: 150rpx;
	padding-left: 20rpx;
	align-items: center;
	color: #AC7631;
	font-size: 14px;
	border-top: 1rpx solid #C7C7C7;

	.suiliBtn {
		margin-left: 100rpx;
		background-color: #BE9567;
		width: 400rpx;
		height: 100rpx;
		border-radius: 20rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.backHome {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 50rpx;

		.backHome-img {
			width: 60rpx;
			height: 60rpx;
		}
	}
}

.personList-container {
	width: 100%;
	min-height: 70vh;
	background-color: #FFFAF0;

	.personItem {
		display: flex;
		align-items: center;
		padding: 10px 10px;
		border-top: 1rpx solid #C7C7C7;

		.text-intro {
			margin-left: 10px;
		}
	}

	.v_html {
		padding: 10px;
	}
}

.personList-title {
	background-color: #FBF5EA;
	display: flex;
	height: 42px;
	padding-left: 10px;
	align-items: center;
	color: #AC7631;
	font-size: 20px;
	border-top: 1rpx solid #C7C7C7;
}

.personList-subtitle {
	background-color: #FBF5EA;
	display: flex;
	height: 32px;
	padding-left: 10px;
	align-items: center;
	color: #AC7631;
	font-size: 16px;
}

.navList {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #FBF5EA;
	padding: 10px 10px;
	border-top: 1rpx solid #C7C7C7;

	.introduce {
		.navtext {
			font-size: 18px;
			margin-left: 10px;
			color: #AC7631;
		}

		width: 162px;
		height: 55px;
		border-radius: 10px;
		background-color: #FFEAC4;

		border: 1px solid #BE9567;
		display: flex;
		align-items: center;
		justify-content: center;

		.navImg {
			width: 28px;
			height: 40px;
		}
	}
}

.index-swiper {
	padding: 10px;
	background-color: #FBF5EA;
}

.slot-wrap {
	// padding: 15px 10px 10px 10px;
	display: flex;
	color: #fff;
	align-items: center;

	.indexlogo {
		width: 30px;
		height: 30px;
		margin-left: 15px;
	}

	.projectName {
		font-size: 18px;

		margin-left: 10px;
	}

	.exmple {
		font-size: 10px;
		margin-left: 30px;
	}
}
</style>